<template>
  <div class="page-category">
    <div class="columns is-multiline">
      <div class="column is-12">
        <h2 class="is-size-2 has-text-centered">{{category.name}}</h2>
      </div>

<!--      <div class="column is-3" v-for="product in category.products"-->
<!--           v-bind:key="product.id">-->

<!--        <div class="box">-->
<!--          <figure class="image mb-4">-->
<!--            <img v-bind:src="product.get_thumbnail">-->
<!--          </figure>-->

<!--          <h3 class="is-size-6">{{product.name}}</h3>-->
<!--          <p class="is-size-6 has-text-grey">${{product.price}}</p>-->

<!--          <router-link v-bind:to="product.get_absolute_url" class="button is-dark mt-4"> View details</router-link>-->
<!--        </div>-->
<!--      </div>-->
      <!--      调用自定义组件-->
      <ProductBox
          v-for="product in category.products"
          v-bind:key="product.id"
          v-bind:product="product"/>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {toast} from "bulma-toast";

//导入自己封装的组件
import ProductBox from "@/components/ProductBox";

export default {
  name: "Category",
  data (){
    return{
      category:{
        products:[]
      }
    }
  },
  components:{
    //调用自定义组件
    ProductBox
  },
  mounted() {
    this.getCategory()
  },
  watch:{
    // 添加一个url监听
    $route(to, from){
      if (to.name === 'Category'){
        this.getCategory()
      }
    }
  },
  methods:{
    async getCategory(){
      //从当前路由中获取参数
      const categorySlug = this.$route.params.category_slug

      //添加加载框
      this.$store.commit('setIsLoading',true)

      await axios
      .get(`/api/v1/products/${categorySlug}/`)
      .then(response =>{
        this.category = response.data

        //网页修改标题
        document.title = this.category.name + '| JACKETS-SHOP'
        //移除加载框
        this.$store.commit('setIsLoading',false)
      })
      .catch(error =>{
        console.log(error)

        toast({
          message:'Something went wrong, Please try again.',
          type:'is-danger',
          dismissible:true,
          pauseOnHover:true,
          duration:2000,
          position:'bottom-center',
        })
      })

      //移除加载框
      this.$store.commit('setIsLoading',false)
    }
  }

}
</script>

<style scoped>

</style>